<template>
    <div class="main">
        <div class="class_login">
            <div class="class_header">
                <h1>欢迎登录丰诚教育</h1>
            </div>
            <div class="class_body"> 
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="50px" class="demo-ruleForm">
                    <el-form-item label="帐号" prop="name" size="medium">
                        <el-input v-model="ruleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password" size="medium">
                        <el-input v-model="ruleForm.password" type="password"></el-input>
                    </el-form-item>
                </el-form>
                <div class='btn'>
                    <el-button  size="large" type="primary" @click="login">登录</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Api from '@/api/Api'
export default ({

    data () {
        return {
            ruleForm : {
                name: '',
                password: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入帐号', trigger: 'blur' },
                    { min: 2, max: 10, message: '请输入2到10位之间', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 30, message: '最少6位数或最长30位数密码', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        login () {
            this.$refs.ruleForm.validate( valid => {
                if(valid){
                    //清除所有缓存
                    localStorage.clear()
                    this.$store.state.token= undefined
                    this.$store.state.user = {}
                    // 点击登录
                    let params ={userName: this.ruleForm.name, password: this.ruleForm.password}
                    Api.login(params).then( res => {
                        // 用户登录
                        if(res.data.code == 0){
                            // 保存token
                            this.$store.commit("setToken",res.data.data)
                            this.$router.push("/sys")
                            this.$message.success("登录成功")
                        }else{
                            this.$message.error(res.data.msg);
                        }
                    })
                }
            })
        }
    }
})
</script>

<style lang="scss" scoped>
.main{
height: 100%;
width: 100%;

display: flex;
align-items: center;
justify-content: center;
.class_login{
    width: 500px;
    border: 1px solid #d1dbe5;
 
    //阴影
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
    //圆角
    border-radius: 4px;
    text-align: center;
    .class_body{
        padding: 10px;
        .btn{
            text-align: center;
            button{
                width: 200px;
            }
        }
    }
    .class_header{
        padding: 20px;
        border-bottom: 1px solid #d1dbe5;
    }
}}
</style>


